<template>
  <div>
    <el-form ref="AccountForm" :model="account" :rules="rules" label-position="left" label-width="0px"
             class="demo-ruleForm login-container">
      <!--<h3>上海岩土地质研究院有限公司</h3>-->
      <!--<h4>测绘项目管理系统</h4>-->
      <h3>测绘项目管理系统</h3>
      <h4></h4>


      <el-form-item prop="username">
        <el-input type="text" v-model="account.username" auto-complete="off" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prop="pwd">
        <el-input type="password" v-model="account.pwd" :autofocus="pwdFocus" auto-complete="off" placeholder="请输入登录密码"></el-input>
      </el-form-item>
      <!--<el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>-->
      <!--<el-form-item class="extra-text">-->
      <!--<a href="javascript:;" class="forget-pwd" title="找回密码">忘记密码?</a>-->
      <!--<router-link :to="{path: '/register'}" class="reg-text" title="立即注册">立即注册</router-link>-->
      <!--</el-form-item>-->
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click.native.prevent="handleLogin" :disabled="allowLogin" :loading="loading">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    data() {
      var validateAccount = (rules, value, callback) => {
        if (value === '') {
          callback(new Error('请输入账号'));
        } else {
          if (this.account.username !== '') {
            this.account.username = value;
            this.validateCorrect();
          }
          callback();
        }
      };
      var validatePwd = (rules, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.account.pwd !== '') {
            this.account.pwd = value;
            this.validateCorrect();
          }
          callback();
        }
      };
      return {
        loading: false,
        account: {
          username: '',
          pwd: ''
        },
        rules: {
          username: [
            { required: true, validator: validateAccount, trigger: 'change' }

          ],
          pwd: [
            {required: true, validator: validatePwd, trigger: 'change'}
          ]
        },
        pwdFocus: false,
        allowLogin: true,
        checked: true
      };
    },
    created() {
      let reg_user = JSON.parse(window.localStorage.getItem('access-user'));
      if (reg_user) {
        this.account.username = reg_user.UserName;
        this.pwdFocus = true;
      }
    },
    methods: {
      handleLogin(){
        this.loading = true;
        this.$http.post(this.domain + '/login', {
          username:this.account.username,
          password:this.account.pwd
        }).then((response) => {
          if (response.data.Success) {
//            console.log(response.data)
            window.localStorage.setItem('access-user', JSON.stringify(response.data));
            this.$message.success(response.data.Msg)
            this.$router.push({path: '/panel/project/management'})
            this.loading = false
          } else {
            this.$message.error(response.data.Msg)
            this.loading = false
          }
        }).catch(function (response) {
          this.$message.error(response.data)
          this.loading = false
        })
      },
      validateCorrect(){
        if(this.account.pwd.trim().length > 0 && this.account.username.trim().length > 0){
          this.allowLogin = false;
        } else {
          this.allowLogin = true;
        }
      }
    }
  }
</script>
<style scoped>
  body {
    background: #DFE9FB;
  }
  .login-container {
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 150px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;

    background: -ms-linear-gradient(top, #ace, #00C1DE); /* IE 10 */
    background: -moz-linear-gradient(top, #ace, #00C1DE); /*火狐*/
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ace), to(#00C1DE)); /*谷歌*/
    background: -webkit-linear-gradient(top, #ace, #00C1DE); /*Safari5.1 Chrome 10+*/
    background: -o-linear-gradient(top,#ace, #00C1DE); /*Opera 11.10+*/

  }

  .login-container>h3,.login-container h4{
    text-align: center;
    color: #2a6496;
  }
  .login-container h4{
    margin-bottom: 40px;
  }
  .login-container .remember {
    margin: 0px 0px 35px 0px;
  }
  .extra-text {
    position: relative;
    margin-bottom: 0;
    padding-left: 2px;
  }
  .extra-text a {
    font-size: 12px;
    color: #aaa;
  }
  .extra-text a:hover {
    color: #29e;
  }
  .extra-text .reg-text {
    position: absolute;
    top: 4px;
    right: 2px;
  }
</style>
